<template>
  <view class="container">
    <view class="add" @tap="addTenant" v-if="isSelect">
      <text class="iconfont icon-tianjia1"></text>
      <text class="_pad-left-5">添加取车人</text>
    </view>
    <view class="list" v-if="tenantList.length > 0">
      <radio-group @change="radioChange">
        <view class="item" v-for="(item, index) in tenantList" :key="index">
          <view class="left">
            <view class="name">{{ item.name }}</view>
            <view class="card-no">{{ item.id_card }}</view>
          </view>
          <view class="right" v-if="isSelect">
            <radio :value="index" :checked="contact_id == item.id" />
          </view>
          <view class="right" v-else @tap="editTenant(item)">
            编辑
            <view
              class="iconfont icon-jiantou _font-10"
              style="color: #bdbdbd; margin-left: 8rpx"
            ></view>
          </view>
        </view>
      </radio-group>
    </view>
    <view class="no-tenant-box" v-else>
      <image src="./static/no_tenant.png" class="no-tenant-img" />
      <view class="text">暂无常用承租人</view>
    </view>
    <view class="operate-box" @tap="search" v-if="isSelect">确定</view>
    <view class="operate-box" @tap="addTenant" v-else>添加承租人</view>
  </view>
</template>

<script>
import { getTenantList } from "@/api/info_setting.js";

export default {
  data() {
    return {
      date: "",
      tenantList: [],
      loading: false,
      contact_id:0,
      contact_name:'',
      contact_phone:'',
      isSelect: false
    };
  },
  onLoad(options) {
    if (options.contact_id) {
      this.isSelect = true;
      this.contact_id = options.contact_id;
      this.contact_name = options.contact_name;
      this.contact_phone = options.contact_phone;
    }
    console.log("onLoad");
    this.getInit();
  },
  onShow() {
    console.log("onShow");
    this.getInit();
  },
  methods: {
    radioChange:function(e) {
      var item = this.tenantList[e.detail.value];
      this.contact_id = item.id;
      this.contact_name = item.name;
      this.contact_phone = item.phone;
    },
    // 选择取车人
    search() {
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];
      prevPage.$vm.contact_id = this.contact_id;
      prevPage.$vm.contact_name = this.contact_name;
      prevPage.$vm.contact_phone = this.contact_phone;
      if (this.contact_id) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        return this.$util.Tips({
          title: "请选择取车人信息",
        });
      }
    },
    getInit() {
      this.loading = false;
      this.tenantList = [];
      this.getList();
    },
    /**
     * 获取列表
     */
    getList: function () {
      let that = this;
      if (that.loading || that.finished) {
        return;
      }
      that.loading = true;
      uni.showLoading({
        title: that.$t(`正在加载…`),
      });
      getTenantList({})
        .then((res) => {
          that.loading = false;
          uni.hideLoading();
          console.log("that.page", that.page);
          that.tenantList = res.data;
        })
        .catch((err) => {
          that.loading = false;
          uni.showToast({
            title: err,
            icon: "none",
          });
        });
    },
    bindDateChange: function (e) {
      this.date = e.detail.value;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    addTenant() {
      uni.navigateTo({
        url: `/pages/info_setting/add_edit_tenant`,
      });
    },
    editTenant(item) {
      uni.navigateTo({
        url:
          `/pages/info_setting/add_edit_tenant?tenant_info=` +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  min-height: 100vh;
  background-color: rgb(248, 249, 252);
}
.add {
  width: 100%;
  height: 184rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #cccccc;
  margin-bottom: 24rpx;
}
.no-tenant-box {
  .no-tenant-img {
    width: 360rpx;
    height: 360rpx;
    display: block;
    margin: 200rpx auto 10rpx;
  }
  .text {
    text-align: center;
    font-size: 26rpx;
    color: #b9b9bd;
  }
}
.container {
  padding: 32rpx;
}
.list {
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.9);
  padding: 32rpx 28rpx;
  border-radius: 10rpx;
  margin-bottom: 24rpx;
  .left {
    .name {
      margin-bottom: 24rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #111e36;
    }
    .card-no {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
    }
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.4);
  }
}
.operate-box {
  width: 686rpx;
  height: 96rpx;
  line-height: 96rpx;
  margin: 60rpx auto 30rpx;
  box-sizing: border-box;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #ffffff;
  background: #008dff;
  text-align: center;
  border-radius: 12rpx;
}
</style>
